import React from 'react'
import {ShippingCartsNumber} from "@/pages/Home/component/Cart/component/ShippingCartsNumber";
import {
  ShippingCartInfo
} from "@/pages/Home/component/Cart/component/ShippingCartList/component/ShippingCartInfo";
import {Divider, message} from "antd"
import {connect} from "umi";
import {useDealProduct} from "@/hooks/useDealProduct";
import './index.less'
import {OPERATE_PRODUCT} from "@/static/enum";

const ShippingCartList = (props: any) => {
  const {dispatch, shippingCartNum, shippingCartList} = props
  const [messageApi, contextHolder] = message.useMessage();

  const dealProduct = (type: string,data: any) => {
    if (type === OPERATE_PRODUCT.PUSH && shippingCartNum === 99) {
      messageApi.open({
        type: 'warning',
        content: 'The cart is full, please clean the cart first'})
      return
    }
    useDealProduct(type,{...data}, dispatch)
  }

  return (
    <div className="relative mb-60 overflow-hidden">
      {contextHolder}
      <ShippingCartsNumber number={shippingCartNum}/>
      <div>
        {
          shippingCartList?.map((cart: any) => {
            return <ShippingCartInfo key={cart.id + cart.size} {...cart} dealProduct={dealProduct}/>
          })
        }
      </div>
      <div className="mt-12">
        <Divider dashed className="ant-divider-inner-text">It is all, nothing more 🤐</Divider></div>
    </div>
  )
}
export default connect(({products}: any)=> ({products}))(ShippingCartList) ;
